<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>构造函数封装效果</title>
  </head>
  <script src="./封装.js"></script>
  <body>
    <div id="root"></div>
    <!-- 视图层 -->
    <!-- 计数器 -->
    <style>
      .count-btn {
        background: #ddd;
        margin: 10px 20px;
        text-align: center;
        width: 170px;
        height: 50px;
      }
    </style>

    <template name="Count">
      <div class="count-wrap">
        <div>当前值: {{count}}</div>
        <button class="count-btn" onclick="counter.methods.handleAdd()">
          +
        </button>
        <button class="count-btn" onclick="counter.methods.handleReduce()">
          -
        </button>
      </div>
    </template>
    <!-- 模型层 - 数据与业务逻辑 -->
    <!--  加减器 -->
    <script>
      const counter = new Component({
        name: "Count",
        el: "#root",
        data: {
          count: 0,
        },
        methods: {
          handleAdd() {
            this.data.count = this.data.count + 1;
          },
          handleReduce() {
            this.data.count = this.data.count - 1;
          },
        },
      });
    </script>

    <!-- 变色盒子 -->
    <style>
      .box {
          width: 400px;
          height: 400px;
          border: 1px solid #ddd;
      }
      .red {
        background: red;
      }
      .green {
        background: green;
      }
    </style>
    <template name="ColorBox">
      <div class="box-wrap">
        <div class="box {{classname}}"></div>
        <button class="count-btn" onclick="colorBox.methods.handleChange()">
          点我让盒子变色！
        </button>
      </div>
    </template>
    <!--  模型层-变色盒子 -->
    <script>
      const colorBox = new Component({
        name: "ColorBox",
        el: "#root",
        data: {
          classname: "red",
        },
        methods: {
          handleChange() {
            this.data.classname =
              this.data.classname === "red" ? "green" : "red";
          },
        },
      });
    </script>
  </body>
</html>
